<template>
  <div class="recommended">
    <div v-for="item in recommended" class="recommended-item">
      <a :href="item.link">
        <img class="recommended-img" :src="item.image" :alt="item.title">
        <div>{{item.title}}</div>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HomeRecommendView",
    props: {
      recommended: {
        type: Array,
        default() {
          return []
        }
      }
    }
  }
</script>

<style scoped>
  .recommended {
    background: white;
    display: flex;
    text-align: center;
    color: var(--color-text-b);
    align-items: center;
    font-size: 15px;
    margin: 8px 0;
    padding: 10px 0;
    border-radius: 5%;
  }

  .recommended-item {
    flex: auto;
  }

  .recommended-img {
    padding: 10px;
    padding-top: 0;
    max-width: 100%;
  }

</style>
